<template>
  <div style="min-width: 700px">
    <jxf-titletip :title="title" :hasRefresh="true" :hasGoBack="true" @goBack="$emit('goBack')" @refreshPage="$emit('fresh')"></jxf-titletip>
    <div class="searchQAlist">
      <div class="headerText">
        <p class="title">集鲜丰使用常见问题</p>
        <p class="subTitle"> <span class="subTitleElement">发布者：</span>{{dataInfo.creatername}}<i class="interval"></i><span class="subTitleElement">发布时间:</span>  {{dataInfo.createTime}}  </p>
      </div>
      <div class="content">
        <el-form :model="dataInfo" class="announcement" label-width="160px">
          <!-- 基本信息 -->
          <div class="basicInfo">
            <i>基本信息</i>
            <el-form-item prop="question" required label="帮助问题：">
              <el-input v-model="dataInfo.question" placeholder="请输入问题" ref="question" maxlength="30" disabled></el-input>
            </el-form-item>
            <el-form-item prop="terminal" required label="展示对象：">
              <el-select v-model="dataInfo.terminal.toString()" clearable placeholder="全部" disabled>
                <el-option label="全部" value="0"></el-option>
                <el-option label="买家端" value="1"></el-option>
                <el-option label="卖家端" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="isShow" label="显示设置：">
              <el-switch
                disabled
                v-model="dataInfo.showPage"
                active-color="#13ce66"
                inactive-color="#f2f2f2">
              </el-switch>
            </el-form-item>
            <el-form-item prop="sort" required label="排序：">
              <el-input v-model="dataInfo.sort" placeholder="请输入排序" ref="sort" maxlength="10" disabled></el-input>
            </el-form-item>
          </div>
          <!-- 帮助正文 -->
          <div class="announcementContent">
            <i>帮助正文</i>
            <el-form-item prop="question" required label="帮助正文：">
              <div v-html="dataInfo.answer"></div>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "SearchQAlist",
        props: {
          isShowSearchQAlist: {
            type: Boolean,
            default: true
          },
          dataInfo: {
            type: Object,
            default: () => {}
          }
        },
        data() {
          return {
            title: "QA预览（非功能）"
          }
        },
        methods: {

        }
    }
</script>

<style lang="scss" scoped>
  .searchQAlist {
    margin-top: 20px;
    padding: 30px;
    background: #fff;
    min-height: 600px;
    border-radius: 4px;
    .headerText {
      display: flex;
      padding-bottom: 30px;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      color: #999;
      border-bottom: 1px solid #f2f2f2;
      .title {
        margin: 10px 0;
        font-size: 20px;
        font-weight: bolder;
      }
      .subTitle {
        font-size: 15px!important;
        letter-spacing: .2px;
        .subTitleElement {
          font-weight: bolder;
        }
        .interval {
          display: inline-block;
          width: 20px;
          visibility: hidden;
        }
      }
    }
    .content {
      padding: 20px;
      padding-left: 120px;
      font-size: 14px;
      .announcement {
        padding: 40px 0 0 150px;
        margin-top: 20px;
        width: 84%;
        min-width: 500px;
        border-radius: 4px;
        background: #fff;
        box-sizing: border-box;
        .el-input {
          width: 80%;
          max-width: 400px;
        }
        .basicInfo {
          position: relative;
          width: 640px;
          i {
            position: absolute;
            left: -280px;
            padding: 5px 0 5px 20px;
            display: block;
            width: 180px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            font-style: normal;
            background: #9ea7b4;
          }
          i:after {
            background-color: transparent;
            content: "";
            position: absolute;
            top: 0;
            right: -50px;
            border: 25px solid;
            border-color: transparent transparent transparent #9ea7b4;
          }
        }
        .announcementContent {
          position: relative;
          top: 20px;
          i {
            position: absolute;
            left: -280px;
            padding: 5px 0 5px 20px;
            display: block;
            width: 180px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            font-style: normal;
            background: #9ea7b4;
          }
          i:after {
            background-color: transparent;
            content: "";
            position: absolute;
            top: 0;
            right: -50px;
            border: 25px solid;
            border-color: transparent transparent transparent #9ea7b4;
          }
          #editorElem {

          }
          .btnGroup {
            margin-top: 20px;
            .el-button {
              padding: 12px 40px;
            }
          }
        }
      }
    }
  }

</style>
